<template>
  <article class="page">
    <headerbar>
      我的学习
      <span @click="goDateList()" class="head-btn" slot="btn">答题日历</span>
    </headerbar>

    <section class="frame-content-sub no-bg">
      <section class="">
        <ul class="tab">
          <li class="active">
            <span>支部月度成绩单</span>
          </li>
          <li @click="go('myQuestion')">
            <span>出题记录</span>
          </li>
        </ul>
      </section>
      <section class="" v-if="false">
        <ul class="tab mgb-0">
          <li :class="{'active':tabIndex==0}"><span>支部月读成绩单</span></li>
          <li :class="{'active':tabIndex==1}"><span>我的成绩单</span></li>
        </ul>
      </section>
      <section class="bg-white filter-wrap">
        <div class="item year-btn flex-center" @click="showTimePicker()">
          <span id="recordTimes">{{year}}</span>
          <img class="arrow_icon" src="../../../../static/images/select_down.png">
        </div>
        <!--<div class="item">
          <cube-select
            v-model="value"
            :options="options">
          </cube-select>
        </div>-->
        <div class="">
          <div class="btn filter-btn" @click="loadData">查询</div>
        </div>
      </section>

      <section class="block mgt-4 pdv-2 pdh-2">
        <div class="border-bottom pdv-2 pdh-2 block-title">
          总人数：
          <span class="color-red">{{data.userTotal}}</span>人 <i class="pdh-2"></i>
          未答题人次：
          <span class="color-red">{{data.wdtTotal}}</span>人次</div>

        <div class="echart">
          <div class="item">
            <p class="title"></p>
            <div class="chart"><percentPie :charData="charData" :id="'c3'" id="c3"></percentPie></div>
            <p class="tip">平均答题率<span class="color-red"></span></p>
          </div>
          <div class="item">
            <p class="title"></p>
            <div class="chart"><percentPie :charData="charData1" :id="'c4'" id="c4"></percentPie></div>
            <p class="tip">正确率100%占比</p>
          </div>
        </div>
      </section>


      <section class="self-height">
        <section class="block">
          <section class="list-table">
            <div class="item">
              <span class="icon">排名</span>
              <span>姓名</span>
              <span>未答题(次)</span>
              <span>答题率</span>
              <span>正确率</span>
            </div>
            <div class="item" v-for="(data,index) in swipeData">
              <span v-if="data.rank === 1" class="icon"><img src="../../../../static/images/dangjian/mine/1.png" alt=""></span>
              <span v-if="data.rank === 2" class="icon"><img src="../../../../static/images/dangjian/mine/2.png" alt=""></span>
              <span v-if="data.rank === 3" class="icon"><img src="../../../../static/images/dangjian/mine/3.png" alt=""></span>
              <span v-if="data.rank !== 1 && data.rank !== 2 && data.rank !== 3" class="icon">{{data.rank}}</span>
              <span>{{data.userName}}</span>
              <span>{{data.wdtNum}}</span>
              <span>{{data.dtl}}</span>
              <span>{{data.zql}}</span>
            </div>
            <div class="text-center no-data" v-if="swipeData.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </section>
          <div class="pdv-3"></div>
          <div class="pdv-3"></div>
          <div class="pdv-3"></div>
          <div class="pdv-3"></div>
        </section>
      </section>

    </section>
  </article>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  import percentPie from '../../../components/common/percentPie.vue'
  export default {
    components: {percentPie},
    name: 'mySchoolReport',
    data () {
      return {
        charData: 0.0,
        charData1: 0.0,
        swipeData: [],
        pageIndex: 1,
        tabIndex: 0,
        currentIndex: 0,
        year: '',
        _time: '',
        data: {},
        yearParam: '',
        monthParam: ''
      }
    },
    created () {
      this._time = new Date()
      this.year = moment(this._time).subtract(1, 'months').format('YYYY-MM')
      // this.year = moment(this._time).format('YYYY-MM')
      this.loadData()
    },
    methods: {
      goDateList () {
        if (window.android && window.android.openUrlAdapt) {
          // window.android.openUrlAdapt('http://www.djhy.gov.cn:8680/party-center/exam/h5/calendar/index.do?access_token=' + this.tools.getToken())
          let url = 'http://222.85.156.70:8888/exam/monthCalendar.html?token=' + tools.getToken()
          if (window.android && window.android.openUrlAdapt) {
            window.android.openUrlAdapt(url);
          }
        }
      },
      go (name) {
        this.$router.push({name: name})
      },
      loadData () {
        this.setParam()
        let userId = this.$localStorage.get('userInfo').id
        let data = {
          loginId: userId,
          year: this.yearParam,
          month: this.monthParam
        }

        loginService.countMonthAchievement(data).then((res) => {
          if (res.code !== 0) {
            this.data = {}
            this.swipeData = []
            return tools.tip(res.message)
          }
          this.data = res.data
          this.swipeData = res.data.userList
          this.charData = res.data.averageDtl
          this.charData1 = res.data.averageBfb
        })
      },
      showTimePicker () {
        let me = this
        if (!this.datePicker) {
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            columnCount: 2,
            min: new Date(nowYear - 10, 1, 1),
            max: new Date(nowYear + 1, 1, 1),
            value: new Date(nowYear, 1, 1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = moment(selectedTime).format('YYYY-MM')
              console.log('---------year=', this.year)
            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: me._time
          })
        }, 100)
      },
      setParam () {
        let param = this.year.split('-')
        this.yearParam = param[0]
        this.monthParam = param[1]
        console.log('---------month=', this.monthParam)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .year-btn {
    border:1px solid rgba(229,229,229,0.6);
    border-radius:10px;
    padding:5px;
    font-size:$titleFontSize;
    font-weight:400;
  }
  .border-bottom {
    border-bottom:1px solid rgba(229,229,229,1);
  }
  .block {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px pxToRem(5px) pxToRem(20px) 0px rgba(0, 0, 59, 0.1);
    border-radius: pxToRem(20px);
    .block-title {
      color: #333;
      font-size: $defaultFontSize;
    }
  }

  .echart {
    display:flex;
    justify-content: space-around;
    margin-top:pxToRem(30px);
    .item {
      flex:1;
      text-align: center;
      .title {
        color:#000;
        font-size: $defaultFontSize;
      }
      .tip {
        font-size:$defaultFontSize;
      }
      .chart {
        width:100%;
        height:pxToRem(220px);
        margin:pxToRem(1px) auto 0;
        font-size: $defaultFontSize;
        canvas {
          margin-top: -30px;
          @include fullImg();
        }
      }
    }
  }
</style>
